.text-hint[popover] {
	position: absolute;

	display: block; /* required for animation to work */

	max-width: 100dvw;
	max-width: 100vw;
	padding: 0.25rem 0.5rem;

	color: var(--color-fg);

	opacity: 0;
	background-color: var(--color-bg-100);
	border: 1px solid var(--color-outline);
	box-shadow: 0 0 8px var(--color-bg-100);

	transition-timing-function: var(--default-transition-timing-function);
	transition-duration: 250ms;
	transition-property: opacity;

	&.enhanced {
		z-index: 1;
		top: 0;
		left: 0;

		overflow: visible;

		/* Avoid layout interference */
		width: max-content;
		height: fit-content;
		margin: 0;
	}

	&:popover-open {
		opacity: 1;
		transition-duration: 120ms;
	}

	& > .arrow {
		pointer-events: none;

		position: absolute;
		z-index: -1;

		width: calc(var(--spacing) * 3);
		height: calc(var(--spacing) * 3);

		background-color: inherit;
		border-color: var(--color-outline);
		border-style: solid;
		border-right-width: 1px;
		border-bottom-width: 1px;
	}
}
